<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>临摹</title>
    <style>
        body{margin:0px auto;padding:0px;}
        #header{
            top: 18px;
            width: 100%;
            height: 56px;
            background: #ffe300;
            margin: 0;
            padding: 0;
            display: block;
            outline: 0;
        }
        .logo img{
            position: absolute;
            padding: 17px;
        }
        .f{
            margin: 0 ;
            text-align: center;
            line-height: 56px;
            padding: 0 0 0 30%;
            font-size: 14px;
            color: #282828
        }
        ul {
           list-style-type: none;
           margin: 0;
           padding: 0;
           overflow: hidden;
           }
        li {
           float: left;
        }
        .menu{
            display: inline-block;
            padding: 0 24px;
        }
        .s-svg{
            background-image:./img/logo.svg
        }
        .search{
            position: absolute;
            top: 0;
            right: 400px;
            width: 56px;
            height: 56px;
            text-align: center;
            line-height: 56px;
            cursor: pointer;
        }
        .right{
            width: 400px;
            height: 56px;
            position: absolute;
            top: 0;
            right: 0;
            
        }
        .upload{
            position: relative;
            float: left;
            padding: 0;
        }
        .menu_line{
             height:15px;
             /* width:1px;  */
             border-left:1px #282828 solid;
             margin: 21px 0 0 0;
        }
        .right-right{
            float: left;
            margin: 0;
            padding: 0;
            text-align: center;
            line-height: 56px;
            font-size: 14px;
            color: #282828
        }
        .main{
            width: 100%;
            height: 400px;
            text-align:center;
        }
        .main-imga{
            border-radius: 4px;
        }
        .main-imgb{
            margin: 8px;
        }
    </style>
</head>
<body>
<div id="header">
    <div class="logo">
        <img src="./img/logo.svg" alt="logo" width="120" height="20">
    </div>
    <div class="f">
        <ul>
            <li class="s-s">
                <a class="menu">首页</a>
            </li>
            <li class="s-f">
                <a class="menu">发现</a>
            </li>
            <li class="s-g">
                <a class="menu">共创</a>
            </li>
            <li class="s-h">
                <a class="menu">活动</a>
            </li>
            <li class="s-z">
                <a class="menu">正版素材</a>
            </li>
            <li class="s-k">
                <a class="menu">课程</a>
            </li>
            <li class="s-b">
                <a class="menu">版权保护</a>
            </li>
            <li class="s-svg">
                <a class="menu"><img src="./img/nav-more.svg" alt="more" width="20" height="56"></a>
            </li>
        </ul>
    </div>
    <div class="search">
            <a class="menu"><img src="./img/nav-search.svg" alt="search" width="20" height="56"></a>
    </div>
    <div class="right">
       <div class="upload">
            <a class="menu"><img src="./img/nav-upload.svg" alt="upload" width="25" height="56"></a>
       </div>
       <ul class="right-right">
           <li class="list">
               <a class="menu">登录</a>
               <li class="menu_line"></li>
               <a class="menu">注册</a>
           </li>
       </ul>
    </div>
    <div class="main">
        <a class="main-imga">
             <img src="./img/main.PNG" alt="upload" width="1380" height="350" >
        </a>
    </div>
    <div class="main">
        <a class="main-imgb">
            <img src="./img/1.PNG" alt="upload" width="260" height="208">
        </a>
        <a class="main-imgb">
            <img src="./img/2.PNG" alt="upload" width="260" height="208">
        </a>
        <a class="main-imgb">
            <img src="./img/3.PNG" alt="upload" width="260" height="208">
        </a>
        <a class="main-imgb">
            <img src="./img/4.PNG" alt="upload" width="260" height="208">
        </a>
        <a class="main-imgb">
            <img src="./img/5.PNG" alt="upload" width="260" height="208">
        </a>
    </div>    

</div>
</body>
</html>